import React, { useState } from 'react';
import { Card, Tabs } from 'antd';
import './AuthPage.css';
import showcaseImage from '../../assets/showcase.png'; 
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm'; 

const { TabPane } = Tabs;

const AuthPage = () => {
    const [activeTab, setActiveTab] = useState('login');

    return (
        <div className="auth-page">
            <div className="wave-container">
                <svg
                    className="wave"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 1440 320"
                >
                    <path
                        fill="#ffffff"
                        fillOpacity="1"
                        d="M0,224L48,213.3C96,203,192,181,288,165.3C384,149,480,139,576,160C672,181,768,235,864,240C960,245,1056,203,1152,181.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
                    ></path>
                </svg>
            </div>
            <div className="auth-content">
                <div className="left-section">
                    <Card bordered={false} className="auth-card">
                        <Tabs activeKey={activeTab} onChange={setActiveTab} centered>
                            <TabPane tab="登录" key="login">
                                
                                <LoginForm /> 
                            </TabPane>
                            <TabPane tab="注册" key="register">
                               
                                <RegisterForm /> 
                            </TabPane>
                        </Tabs>
                    </Card>
                </div>
                <div className="right-section">
                    <img src={showcaseImage} alt="展示图片" className="showcase-image" />
                </div>
            </div>
        </div>
    );
};

export default AuthPage;
